<template>
  <view style="width: 100%;height: 100%;">
	  <!-- <image :src="imageSrc" mode="aspectFit" :style="imageStyle" v-if="imageSrc == '/static/loaddingImg.gif'"/> -->
	  <image :src="errorImage" mode="aspectFill" :style="imageStyle" style="background-color: #000;"  v-if="imageSrc == '/static/logo.png'"/>
	  <image :src="imageSrc" :mode="mode" lazy-load @error="imgError" :style="imageStyle" v-else/>
  </view>
</template>

<script>
import mediaCache from '@/common/mediacache/mediaCache.js'; // 适配你的实际路径
export default {
  props: {
    srckey: {
      type: String,
      required: true
    },
	noclick: {
	  type: Boolean,
	  default:false
	},
    placeholder: {
      type: String,
      default: '/static/loaddingImg.gif' // 默认占位图
    },
    errorImage: {
      type: String,
      default: '/static/logo.png' // 默认加载失败图
    },
    mode: {
      type: String,
      default: 'aspectFill'
    },
    imageStyle: {
      type: String,
      default: 'width: 100%;height: 100%'
    },
  },
  data() {
    return {
      imageSrc: '',
	  fileTpye:'image',
	  uploadType:'stars'
    };
  },
  watch: {
  	srckey(newVal, oldVal) {
  		if(!newVal) {
  			this.handleLoadError()
  			return
  		}
  		this.loadImage();
  	}
  },
  mounted() {
    this.loadImage();
  },
  methods: {
    async loadImage() {
		console.log('333333333',this.srcke);
	   try {
		 const cachedMedia = await mediaCache.loadMedia(this.srckey, this.uploadType, this.fileTpye);
		 this.imageSrc = cachedMedia;
		 console.log('11111111',cachedMedia);
	   } catch (error) {
		   console.log('22222222',error);
	     this.handleLoadError(error);
	   }
    },
    handleLoadError(error) {
      this.imageSrc = this.errorImage;
    },
    imgError() {
      this.imageSrc = this.errorImage;
    }
  }
};
</script>

<style scoped lang="scss">
	image{
		will-change: transform;
		display: block;
	}
  /* 添加一些默认样式 */
</style>
